<script setup lang="ts" name="MenuBar">
import logo from "@/assets/favicon.ico"

const props = defineProps({
    title:{
        type:String,
        default:'窗口'
    },
    titleColor:{
        type:String,
        default:'#ccc'
    },
    barColor:{
        type:String,
        default:'#333'
    },
    logo:{
        type:Object,
        default:()=>({
            isIcon:false,
            value:logo
        })
    },
    hideLogo:{
        type:Boolean,
        default:false
    },
    systemIconColor:{
        type:String,
        default:'#fff'
    },
    couldFixTop:{
        type:Boolean,
        default:false
    },
    hideMaximize:{
        type:Boolean,
        default:false
    },
    hideMinimize:{
        type:Boolean,
        default:false
    },
    closeIcon:{
        type:String,
        default:undefined
    },
    menus:{
        type:Array<any>,
        default:()=>[]
    },
    menusOnRight:{
        type:Boolean,
        defalut:false
    }
})



const emits = defineEmits(['select'])
const hasMaximize = ref<boolean>(false)
const mainMenuIndex = ref<number|undefined>()
const domMenu = ref()

//监听系统按钮
const handleSystemClick = (mark:string) => {
    if(mark=='maximize'){
        hasMaximize.value = true
    }
    if(mark=='restore'){
        hasMaximize.value = false
    }
    window.$.send('GENERAL-BAR',{mark})
}

//监听菜单按钮点击
const handleMainMenuClick = (index:number,mark?:string) =>{
    //如果存在mark，执行
    if(mark){
        emits('select',mark)
        return
    }
    //如果多次点击，取消展示
    if(mainMenuIndex.value == index){
        mainMenuIndex.value = undefined
        return
    }
    mainMenuIndex.value = index
    nextTick(()=>{
        //鼠标移出后，子菜单隐藏
        const doms = Array.isArray(domMenu.value)?domMenu.value:[domMenu.value]
        doms[mainMenuIndex.value??0]?.addEventListener('mouseleave',()=>{
            mainMenuIndex.value= undefined
        })
    })
}

const handelSubMenuClick = (mark:string) => {
    //如果有mark则关闭菜单
    if(mark) mainMenuIndex.value= undefined
    emits('select',mark)
}

const initHandler = (key:string)=>{
    window.$.listen('unmaximize-call',(e, res)=>{
        hasMaximize.value = false
    })
    window.$.listen('maximize-call',(e, res)=>{
        hasMaximize.value = true
    })
    window.$.send(key)
}

const close = () => {
    window.$.send('GENERAL-BAR',{mark:'close'})
}

defineExpose({
    initHandler,
    close
})
</script>
<template>
	<div class="main-content menu-bar" :style="{backgroundColor:props.barColor}">
		<template v-if="!props.hideLogo">
			<div v-if="props.logo.isIcon" class="icon">
				<svg-icon :icon-class="props.logo.value" width="18" height="18" />
			</div>
			<!-- <div v-else class="icon" :style="{backgroundImage:`url('${props.logo.value}')`}"></div> -->
            <div v-else class="icon" :style="{backgroundImage:`url('${props.logo.value}')`}"></div>
		</template>

		<div v-else class="xh-40 xw-10"></div>
		<div class="title" :style="{color:props.titleColor}">
			{{props.title}}
		</div>
        <div v-if="menusOnRight" class="space"></div>
		<div ref="domMenu" class="menu" v-for="item,mindex in props.menus" :key="mindex" @click="handleMainMenuClick(mindex,item.mark)">
			<svg-icon :icon-class="item.icon" width="18" height="18" class="main-menu" />
			<span class="name main-menu p-r-3-0">{{ item.name }}</span>
			<div v-if="mainMenuIndex==mindex&&item.childrens&&item.childrens.length" class="mc mc1">
				<div v-for="mc1 in item.childrens" :key="mc1.name" class="childmenu" @click.stop="handelSubMenuClick(mc1.mark)">
					<svg-icon v-if="mc1.type=='checkbox'&&mc1.value" icon-class="check" width="19" height="169" class="p-r-2-2" />
					<svg-icon v-else :icon-class="mc1.icon??''" width="19" height="19" class="p-r-2-2" />{{ mc1.name }}
				</div>
			</div>
		</div>
		<div v-if="!menusOnRight" class="space"></div>
		<div v-if="!props.hideMinimize" class="minimize operate m-r-10-0" :style="{color:props.systemIconColor}" @click="handleSystemClick('minimize')">
			<svg-icon icon-class="minimize" width="21" height="21" class="p-r-0-2" />
		</div>
		<template v-if="!props.hideMaximize">
			<div v-if="hasMaximize" class="restore operate" :style="{color:props.systemIconColor}" @click="handleSystemClick('restore')">
				<svg-icon icon-class="restore" width="21" height="21" class="p-r-0-2" />
			</div>
			<div v-else class="maximize operate" :style="{color:props.systemIconColor}" @click="handleSystemClick('maximize')">
				<svg-icon icon-class="maximize" width="21" height="21" class="p-r-0-2" />
			</div>
		</template>
		<div class="close operate" :style="{color:props.systemIconColor}" @click="handleSystemClick('close')">
			<svg-icon :icon-class="props.closeIcon??'close'" width="21" height="21" class="p-r-0-3" />
		</div>
	</div>
</template>
<style lang="scss">
.main-content.menu-bar{
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard syntax */
    width:100%;
    height:40px;
    box-sizing: border-box;
    border-bottom:solid 1px rgba(255,255,255,0.1);
    display:flex;
    flex-direction: row;
    .icon{
        width:40px;
        height:40px;
        // background-image:url('/PlantB.ico');
        background-position:center;
        background-size:55% 55%;
        background-repeat:no-repeat;
        padding-left:2px;
        -webkit-app-region: drag;
        color:#fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .title{
        max-width:180px;
        padding-right:20px;
        height:40px;
        line-height:40px;
        font-weight:bold;
        font-size:14px;
        -webkit-app-region: drag;
    }
    .menu{
        width:70px;
        height:39px;
        color:#fff;
        text-align: center;
        line-height:40px;
        font-size:12px;
        display: flex;
        justify-content: center;
        align-items: center;
        position:relative;
        cursor: pointer;
        &:hover{
            background-color: #000;
            .name.main-menu{
                color:#99CCFF;
            }
            .svg-icon.main-menu{
                color:#99CCFF;
            }
        }
        .mc1{
            z-index:999;
            width:130px;
            position:absolute;
            left:0;
            top:38px;
            background-color:#000;
            border:solid 1px #222;
            .childmenu{
                width:90%;
                height:28px;
                line-height:30px;
                border-radius: 6px;
                text-align: left;
                margin:6px auto;
                color:#fff;
                display: flex;
                align-items: center;
                &:hover{
                    background-color:#0099CC;
                }
            }
        }
    }
    .space{
        flex:1;
        height:40px;
        -webkit-app-region: drag;
    }
    .operate{
        width:40px;
        height:39px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &:hover{
            background-color:rgba(0,0,0,0.3);
            color:#99CCFF !important;
        }
    }
}
</style>
<style lang="scss" scoped></style>
